<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应文字容器</title>
    <style>
        .text-container {
            width: 100%;
            max-width: 100%;
            height: auto;
            min-height: 50px;
            padding: 20px;
            border: 2px solid #333;
            border-radius: 8px;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            resize: both;
            overflow: auto;
        }
        
        .text-container span {
            font-size: clamp(12px, 4vw, 48px);
            font-weight: bold;
            color: #333;
            white-space: nowrap;
            text-align: center;
            line-height: 1.2;
        }
        
        body {
            margin: 0;
            padding: 20px;
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #e8e8e8;
        }
        
        .controls {
            margin-bottom: 20px;
            text-align: center;
        }
        
        .controls button {
            margin: 0 10px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .controls button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="controls">
        <button onclick="resizeContainer('small')">小尺寸</button>
        <button onclick="resizeContainer('medium')">中等尺寸</button>
        <button onclick="resizeContainer('large')">大尺寸</button>
        <button onclick="resizeContainer('full')">全屏</button>
    </div>
    
    <div class="text-container" id="textContainer">
        <span>立刻电视机分厘卡撒酒疯离开</span>
    </div>

    <script>
        function resizeContainer(size) {
            const container = document.getElementById('textContainer');
            
            switch(size) {
                case 'small':
                    container.style.width = '200px';
                    container.style.height = '100px';
                    break;
                case 'medium':
                    container.style.width = '400px';
                    container.style.height = '150px';
                    break;
                case 'large':
                    container.style.width = '600px';
                    container.style.height = '200px';
                    break;
                case 'full':
                    container.style.width = '100%';
                    container.style.height = '300px';
                    break;
            }
            
            // 调整大小后重新计算字体大小
            setTimeout(adjustFontSize, 10);
        }
        
        // 监听容器大小变化，自动调整文字大小
        function adjustFontSize() {
            const container = document.getElementById('textContainer');
            const text = container.querySelector('span');
            const containerWidth = container.offsetWidth - 40; // 减去padding
            const containerHeight = container.offsetHeight - 40; // 减去padding
            
            // 先设置一个初始字体大小来测量文字
            text.style.fontSize = '48px';
            
            // 获取文字的实际宽度和高度
            const textWidth = text.scrollWidth;
            const textHeight = text.scrollHeight;
            
            // 计算合适的字体大小
            const widthRatio = containerWidth / textWidth;
            const heightRatio = containerHeight / textHeight;
            const ratio = Math.min(widthRatio, heightRatio);
            
            // 计算新的字体大小
            let fontSize = 48 * ratio;
            
            // 限制字体大小范围
            fontSize = Math.max(12, Math.min(fontSize, 48));
            text.style.fontSize = fontSize + 'px';
        }
        
        // 使用ResizeObserver监听容器大小变化
        const resizeObserver = new ResizeObserver(function(entries) {
            for (let entry of entries) {
                if (entry.target.id === 'textContainer') {
                    adjustFontSize();
                }
            }
        });
        
        // 开始监听容器大小变化
        window.addEventListener('load', function() {
            const container = document.getElementById('textContainer');
            resizeObserver.observe(container);
            adjustFontSize();
        });
        

    </script>
</body>
</html>